<template>
    <!-- xl:dark:bg-zinc-800  媒体查询 是pc端的情况下是 800 -->
    <div class="bg-white dark:bg-zinc-900 xl:dark:bg-zinc-800 rounded pb-1">
        <div class="relative w-full rounded cursor-zoom-in group">
            <img
                :src="data.photo"
                alt=""
                class="w-full rounded bg-transparent"
                :style="{
                    height: (width / data.photoWidth) * data.photoHeight + 'px'
                }"
            />
            <!-- 遮罩层 hidden--移动端下不显示遮罩层  xl:block--pc端下才显示遮罩层 -->
            <div class="hidden opacity-0 w-full h-full bg-zinc-900/50 absolute top-0 right-0 left-0 rounded duration-300 group-hover:opacity-100 xl:block">
                <!-- 分享 -->
                <m-button
                    class="absolute top-1.5 left-1.5"
                    size="small"
                    >分享</m-button
                >
                <!-- 点赞 -->
                <m-button
                    class="absolute top-1.5 right-1.5"
                    type="info"
                    icon="heart"
                    size="small"
                    iconClass="fill-zinc-900 dark:fill-zinc-200"
                ></m-button>
                <!-- 下载 -->
                <m-button
                    class="absolute bottom-1.5 left-1.5 bg-zinc-100/70"
                    type="info"
                    icon="download"
                    size="small"
                    iconClass="fill-zinc-900 dark:fill-zinc-200"
                ></m-button>
                <!-- 全屏 -->
                <m-button
                    class="absolute bottom-1.5 right-1.5"
                    type="info"
                    icon="full"
                    size="small"
                    iconClass="fill-zinc-900 dark:fill-zinc-200"
                ></m-button>
            </div>
        </div>
        <!-- 标题 -->
        <p class="text-sm mt-1 font-bold text-zinc-900 dark:text-zinc-300 px-1">{{ data.title }}</p>
        <!-- 作者 -->
        <div class="flex items-center mt-1 px-1">
            <img
                :src="data.avatar"
                alt=""
                class="h-2 w-2 rounded-full"
            />
            <span class="text-sm text-zinc-500 ml-1">{{ data.author }}</span>
        </div>
    </div>
</template>

<script setup>
defineProps({
    data: {
        type: Object,
        default: () => {
            return {}
        },
        required: true
    },
    width: {
        type: Number
    }
})
</script>
<style lang="scss" scope></style>
